<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Inbox - Stilearn Metro Admin Bootstrap</title>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="stilearn metro admin bootstrap" />
        <meta name="author" content="stilearning" />
        
        
        <!-- styles -->
        <link href="css/bootstrap.css" rel="stylesheet" />
        <link href="css/bootstrap-responsive.css" rel="stylesheet" />
        <!-- default theme -->
        <link href="css/metro-bootstrap.css" rel="stylesheet" />
        <link href="css/metro.css" rel="stylesheet" />
        <link href="css/metro-responsive.css" rel="stylesheet" />
        <link href="css/metro-helper.css" rel="stylesheet" />
        <link href="css/font-awesome.css" rel="stylesheet" />
        <link href="css/m-scrollbar/jquery.mCustomScrollbar.css" rel="stylesheet" />
        
        
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="js/html5shiv.js"></script>
          <script src="js/lte-ie7.js"></script>
        <![endif]-->
        
        <!-- fav and touch icons -->
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png" />
        <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png" />
        <link rel="shortcut icon" href="ico/favicon.png" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
    <body>
        <!-- start header-->
        <header class="header">
            <!-- start navbar, this navbar on top -->
            <div id="navbar-top" class="navbar navbar-cyan">
                <!-- navbar inner-->
                <div class="navbar-inner">
                    <!-- container-->
                    <div class="container">
                        
                        <!--this btn-navbar contains the menu on the side-left, will be seen on portrait tablet and less. -->
                        <a class="btn btn-navbar help-inline" data-toggle="collapse" data-target="#navbar-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </a>
                        
                        <!-- Your brand here, images or text -->
                        <a class="brand" href="index.html">
                            <!-- just a sample brand, replace with your own -->
                            <i class="aweso-th-large"></i> Stilearn
                        </a>
                        
                        <!-- Un-collapse nav -->
                        <div class="nav-uncollapse">
                            <!-- pull left menu-->
                            <ul class="nav pull-left hidden-phone">
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <i class="aweso-plus-sign aweso-large"></i> &nbsp;Create <i class="aweso-angle-down"></i>
                                    </a>
                                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                                        <li><a tabindex="-1" href="#">Page</a></li>
                                        <li><a tabindex="-1" href="#">Post</a></li>
                                        <li><a tabindex="-1" href="#">User</a></li>
                                        <li class="divider"></li>
                                        <li><a tabindex="-1" href="#">Task</a></li>
                                        <li><a tabindex="-1" href="#">Create Something</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <input class="hide" type="file" name="upload-files" />
                                    <a href="#" data-toggle="upload" data-target="upload-files"><i class="aweso-upload aweso-large"></i> &nbsp;Upload</a>
                                </li>
                            </ul><!--/pull left menu-->

                            <!-- pull right menu-->
                            <ul class="nav pull-right">
                                <!-- notification -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <div class="label">3</div>
                                        <i class="aweso-bell-alt"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-extend" role="menu" aria-labelledby="dropdownMenu">
                                        <li class="dropdown-header">You have 4 new notofications</li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="pull-left">
                                                        <img class="media-object" data-src="holder.js/32x32" />
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="media-heading"><small class="pull-right">Just Now</small> Update version</h4>
                                                        <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque...</p>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="pull-left">
                                                        <img class="media-object" data-src="holder.js/32x32" />
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="media-heading"><small class="pull-right">5 minutes</small> Jane Smith</h4>
                                                        <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit...</p>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="pull-left">
                                                        <img class="media-object" data-src="holder.js/32x32" />
                                                    </div>
                                                    <div class="media-body">
                                                        <h4 class="media-heading"><small class="pull-right">3 hours</small> New comment</h4>
                                                        <p>Tellus ac cursus commodo, tortor mauris condimentum nibh...</p>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="dropdown-footer">
                                            <a tabindex="-1" href="#"><i class="aweso-angle-right pull-right"></i> See all notifications</a>
                                        </li>
                                    </ul>
                                </li><!-- /notification -->
                                
                                <!-- task -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <div class="label">5</div>
                                        <i class="aweso-tasks"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-extend" role="menu" aria-labelledby="dropdownMenu">
                                        <li class="dropdown-header">You have 6 tasks</li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">20%</small> upload some file</h4>
                                                        <div class="progress progress-info">
                                                            <div class="bar" style="width: 20%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">40%</small>  <span class="text-error">paused!</span> do something</h4>
                                                        <div class="progress progress-warning">
                                                            <div class="bar" style="width: 40%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">60%</small> do another task</h4>
                                                        <div class="progress progress-info">
                                                            <div class="bar" style="width: 60%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">80%</small> <span class="text-error">failed!</span> upload some file</h4>
                                                        <div class="progress progress-danger">
                                                            <div class="bar" style="width: 80%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li>
                                            <a tabindex="-1" href="#">
                                                <div class="media">
                                                    <div class="media-body">
                                                        <h4 class="task-label"><small class="pull-right task-status">100%</small> <span class="text-success">done!</span> another task</h4>
                                                        <div class="progress progress-success">
                                                            <div class="bar" style="width: 100%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>
                                        <li class="dropdown-footer">
                                            <a tabindex="-1" href="#"><i class="aweso-angle-right pull-right"></i> See all tasks</a>
                                        </li>
                                    </ul>
                                </li><!-- /task -->
                                
                                <!-- settings -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <i class="aweso-cog"></i>
                                    </a>
                                    <ul class="dropdown-menu dropdown-extend" data-dropdown="no-propagation" role="menu" aria-labelledby="dropdownMenu">
                                        <li class="dropdown-header">General settings</li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-columns"></i></div>
                                                <div class="content">Fluid Layout</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="checkbox" id="layout-mode" name="layout-mode" checked="" />
                                                        <label for="layout-mode"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="backgrounds hide">
                                            <div class="setting-list">
                                                <div class="background-label">Backgrounds</div>
                                                <div class="background-choice">
                                                    <a href="#" class="bg-item bg-black" data-bg="noimage"></a>
                                                    <a href="#" class="bg-item bg-1" data-bg="01.jpg"></a>
                                                    <a href="#" class="bg-item bg-2" data-bg="02.jpg"></a>
                                                    <a href="#" class="bg-item bg-3" data-bg="03.jpg"></a>
                                                    <a href="#" class="bg-item bg-4" data-bg="04.jpg"></a>
                                                    <a href="#" class="bg-item bg-5" data-bg="05.jpg"></a>
                                                    <a href="#" class="bg-item bg-6" data-bg="06.jpg"></a>
                                                    <a href="#" class="bg-item bg-7" data-bg="07.jpg"></a>
                                                    <a href="#" class="bg-item bg-8" data-bg="08.jpg"></a>
                                                    <a href="#" class="bg-item bg-9" data-bg="09.jpg"></a>
                                                    <a href="#" class="bg-item bg-10" data-bg="10.jpg"></a>
                                                    <a href="#" class="bg-item bg-11" data-bg="11.jpg"></a>
                                                    <a href="#" class="bg-item bg-12" data-bg="12.jpg"></a>
                                                    <a href="#" class="bg-item bg-13" data-bg="13.jpg"></a>
                                                    <a href="#" class="bg-item bg-14" data-bg="14.jpg"></a>
                                                    <a href="#" class="bg-item bg-15" data-bg="15.jpg"></a>
                                                    <a href="#" class="bg-item bg-16" data-bg="16.jpg"></a>
                                                    <a href="#" class="bg-item bg-17" data-bg="17.jpg"></a>
                                                    <a href="#" class="bg-item bg-18" data-bg="18.jpg"></a>
                                                    <a href="#" class="bg-item bg-19" data-bg="19.jpg"></a>
                                                    <a href="#" class="bg-item bg-20" data-bg="20.jpg"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-pushpin"></i></div>
                                                <div class="content">Fixed Header</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="checkbox" id="header-mode" name="header-mode" />
                                                        <label for="header-mode"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-pushpin"></i></div>
                                                <div class="content">Fixed Sidebar</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="checkbox" id="sidebar-mode" name="sidebar-mode" />
                                                        <label for="sidebar-mode"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x color-silver aweso-sign-blank"></i></div>
                                                <div class="content">Light theme</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="radio" value="light" id="theme-light" name="theme-mode" checked="" />
                                                        <label for="theme-light"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-sign-blank"></i></div>
                                                <div class="content">Dark theme</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="radio" value="dark" id="theme-dark" name="theme-mode" />
                                                        <label for="theme-dark"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="setting-list">
                                                <div class="icon"><i class="aweso-2x aweso-tint"></i></div>
                                                <div class="content">Syncronize</div>
                                                <div class="checker">
                                                    <div class="checkbox-slide bg-silver help-block">
                                                        <input class="input-fx" type="checkbox" id="syncronize-theme" name="syncronize-theme" checked="" />
                                                        <label for="syncronize-theme"></label>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="syncronize">
                                            <div class="setting-list">
                                                <div class="themes-label">Theme colors</div>
                                                <div class="themes-choice">
                                                    <a href="#cyan" data-theme="cyan" class="bg-cyan"></a>
                                                    <a href="#cobalt" data-theme="cobalt" class="bg-cobalt"></a>
                                                    <a href="#indigo" data-theme="indigo" class="bg-indigo"></a>
                                                    <a href="#violet" data-theme="violet" class="bg-violet"></a>
                                                    <a href="#lime" data-theme="lime" class="bg-lime"></a>
                                                    <a href="#green" data-theme="green" class="bg-green"></a>
                                                    <a href="#emerald" data-theme="emerald" class="bg-emerald"></a>
                                                    <a href="#teal" data-theme="teal" class="bg-teal"></a>
                                                    <a href="#pink" data-theme="pink" class="bg-pink"></a>
                                                    <a href="#magenta" data-theme="magenta" class="bg-magenta"></a>
                                                    <a href="#crimson" data-theme="crimson" class="bg-crimson"></a>
                                                    <a href="#red" data-theme="red" class="bg-red"></a>
                                                    <a href="#orange" data-theme="orange" class="bg-orange"></a>
                                                    <a href="#amber" data-theme="amber" class="bg-amber"></a>
                                                    <a href="#yellow" data-theme="yellow" class="bg-yellow"></a>
                                                    <a href="#brown" data-theme="brown" class="bg-brown"></a>
                                                    <a href="#olive" data-theme="olive" class="bg-olive"></a>
                                                    <a href="#steel" data-theme="steel" class="bg-steel"></a>
                                                    <a href="#mauve" data-theme="mauve" class="bg-mauve"></a>
                                                    <a href="#taupe" data-theme="taupe" class="bg-taupe"></a>
                                                    <a href="#black" data-theme="inverse" class="bg-black"></a>
                                                    <a href="#silver" data-theme="silver" class="bg-silver"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="unsyncronize hide">
                                            <div class="setting-list">
                                                <div class="themes-label">Navbar colors</div>
                                                <div class="themes-choice themes-navbar">
                                                    <a href="#cyan" data-theme="cyan" class="bg-cyan"></a>
                                                    <a href="#cobalt" data-theme="cobalt" class="bg-cobalt"></a>
                                                    <a href="#indigo" data-theme="indigo" class="bg-indigo"></a>
                                                    <a href="#violet" data-theme="violet" class="bg-violet"></a>
                                                    <a href="#lime" data-theme="lime" class="bg-lime"></a>
                                                    <a href="#green" data-theme="green" class="bg-green"></a>
                                                    <a href="#emerald" data-theme="emerald" class="bg-emerald"></a>
                                                    <a href="#teal" data-theme="teal" class="bg-teal"></a>
                                                    <a href="#pink" data-theme="pink" class="bg-pink"></a>
                                                    <a href="#magenta" data-theme="magenta" class="bg-magenta"></a>
                                                    <a href="#crimson" data-theme="crimson" class="bg-crimson"></a>
                                                    <a href="#red" data-theme="red" class="bg-red"></a>
                                                    <a href="#orange" data-theme="orange" class="bg-orange"></a>
                                                    <a href="#amber" data-theme="amber" class="bg-amber"></a>
                                                    <a href="#yellow" data-theme="yellow" class="bg-yellow"></a>
                                                    <a href="#brown" data-theme="brown" class="bg-brown"></a>
                                                    <a href="#olive" data-theme="olive" class="bg-olive"></a>
                                                    <a href="#steel" data-theme="steel" class="bg-steel"></a>
                                                    <a href="#mauve" data-theme="mauve" class="bg-mauve"></a>
                                                    <a href="#taupe" data-theme="taupe" class="bg-taupe"></a>
                                                    <a href="#black" data-theme="inverse" class="bg-black"></a>
                                                    <a href="#silver" data-theme="silver" class="bg-silver"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="unsyncronize hide">
                                            <div class="setting-list">
                                                <div class="themes-label">Sidebar colors</div>
                                                <div class="themes-choice themes-sidebar">
                                                    <a href="#cyan" data-theme="cyan" class="bg-cyan"></a>
                                                    <a href="#cobalt" data-theme="cobalt" class="bg-cobalt"></a>
                                                    <a href="#indigo" data-theme="indigo" class="bg-indigo"></a>
                                                    <a href="#violet" data-theme="violet" class="bg-violet"></a>
                                                    <a href="#lime" data-theme="lime" class="bg-lime"></a>
                                                    <a href="#green" data-theme="green" class="bg-green"></a>
                                                    <a href="#emerald" data-theme="emerald" class="bg-emerald"></a>
                                                    <a href="#teal" data-theme="teal" class="bg-teal"></a>
                                                    <a href="#pink" data-theme="pink" class="bg-pink"></a>
                                                    <a href="#magenta" data-theme="magenta" class="bg-magenta"></a>
                                                    <a href="#crimson" data-theme="crimson" class="bg-crimson"></a>
                                                    <a href="#red" data-theme="red" class="bg-red"></a>
                                                    <a href="#orange" data-theme="orange" class="bg-orange"></a>
                                                    <a href="#amber" data-theme="amber" class="bg-amber"></a>
                                                    <a href="#yellow" data-theme="yellow" class="bg-yellow"></a>
                                                    <a href="#brown" data-theme="brown" class="bg-brown"></a>
                                                    <a href="#olive" data-theme="olive" class="bg-olive"></a>
                                                    <a href="#steel" data-theme="steel" class="bg-steel"></a>
                                                    <a href="#mauve" data-theme="mauve" class="bg-mauve"></a>
                                                    <a href="#taupe" data-theme="taupe" class="bg-taupe"></a>
                                                    <a href="#black" data-theme="inverse" class="bg-black"></a>
                                                    <a href="#silver" data-theme="silver" class="bg-silver"></a>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="dropdown-footer">
                                            <a tabindex="-1" href="#"><i class="aweso-angle-right pull-right"></i> Settings page</a>
                                        </li>
                                    </ul>
                                </li><!-- /settings -->
                                
                                <!-- account -->
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        Bent Doe <i class="aweso-angle-down"></i>
                                    </a>
                                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                                        <li><a tabindex="-1" href="#">Profile</a></li>
                                        <li><a tabindex="-1" href="#">Activity</a></li>
                                        <li><a tabindex="-1" href="page-inbox.html">Inbox</a></li>
                                        <li class="divider"></li>
                                        <li><a tabindex="-1" href="page-login.html">Logout</a></li>
                                    </ul>
                                </li><!-- /account -->
                            </ul><!--/pull right menu-->
                        </div><!-- /uncollapse nav -->
                        
                        <!-- Everything you want hidden at 940px or less, leave it blank! (this use when side-left collapse) -->
                        <div id="navbar-collapse" class="nav-collapse collapse hidden-desktop"></div>
                        
                    </div><!--/container-->
                </div><!--/navbar-inner-->
                
            </div> <!--/ navbar-->
        </header> <!--/ end header-->
        
        <!-- start section content-->
        <section class="section-content">
            <!-- side left, its part to menu on left-->
            <div id="navside" class="side-left" data-collapse="navbar">
                <form class="form-inline search-module" action="?" method="post" />
                    <div class="input-append input-append-inline">
                        <input name="search" class="input-block-level" type="text" placeholder="Type to search" />
                        <button class="btn bg-cyan" type="button">
                            <i class="aweso-search"></i>
                        </button>
                    </div>
                </form>
                <!--nav, this structure create with nav (find the bootstrap doc about .nav list) -->
                <ul class="nav nav-list">
                    <li class="active"><a href="#inbox" data-toggle="tab">Inbox</a></li>
                    <li><a href="#send" data-toggle="tab">Send</a></li>
                    <li><a href="#draft" data-toggle="tab">Draft</a></li>
                    <li><a href="#archive" data-toggle="tab">Archive</a></li>
                    <li><a href="#trash" data-toggle="tab">Trash</a></li>
                    <li class="dropdown-list"> <!-- example use with drop list -->
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown-list">
                            Others
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#spam">Spam</a></li>
                            <li><a href="#contact">Contact</a></li>
                            <li><a href="#photos">Photos</a></li>
                        </ul>
                    </li>
                </ul><!--/ nav -->
            </div><!--/ side left-->
            
            
            
            <!-- start content -->
            <div class="content">
                <!-- content header -->
                <header class="content-header">
                    <!-- content action (optional)-->
                    <ul class="content-action pull-right">
                        <li>
                            <div class="btn-group">
                                <a class="btn btn-link" href="#">New</a>
                                <a class="btn btn-link" href="#">Reply</a>
                                <a class="btn btn-link" href="#">Delete</a>
                            </div>
                        </li>
                        <li>
                            <div class="btn-group">
                                <a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
                                    Move
                                </a>
                                <ul class="dropdown-menu pull-right black">
                                    <li><a href="#">Inbox</a></li>
                                    <li><a href="#">Send</a></li>
                                    <li><a href="#">Archive</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Something else</a></li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <div class="btn-group">
                                <a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
                                    <i class="aweso-ellipsis-horizontal"></i>
                                </a>
                                <ul class="dropdown-menu pull-right black">
                                    <li><a href="#">Mark read</a></li>
                                    <li><a href="#">Mark unread</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Something else</a></li>
                                </ul>
                            </div>
                        </li>
                    </ul> <!-- /content action -->

                    <!-- content title-->
                    <div class="page-header"><h1>Inbox</h1></div>
                </header> <!--/ content header -->
                
                
                <!-- content page -->
                <article class="content-page clearfix">
                    <!-- main page, you're application here -->
                    <div class="main-page">
                        <div class="content-inner ">
                            <!-- inbox -->
                            <div class="inbox full-content">
                                <!-- messgaetab-pane -->
                                <div class="messgaetab-pane" data-scrollbar="mscroll" data-theme="dark-thick" data-button="true" data-autohide="false">
                                    <!-- tab content -->
                                    <div class="tab-content">
                                        <!-- message control -->
                                        <div class="message-control clearfix">
                                            <div class="pull-left">
                                                <input class="message-toggle" type="checkbox" value="1" />
                                                <div class="btn-group">
                                                    <a class="btn btn-small btn-link dropdown-toggle" data-toggle="dropdown" href="#">
                                                        Filter <i class="aweso-angle-down"></i>
                                                    </a>
                                                    <ul class="dropdown-menu black">
                                                        <li><a href="#">All</a></li>
                                                        <li><a href="#">Read</a></li>
                                                        <li><a href="#">Unread</a></li>
                                                        <li class="divider"></li>
                                                        <li><a href="#">Something Else</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="pull-right">
                                                <div class="btn-group">
                                                    <a class="btn btn-small btn-link dropdown-toggle" data-toggle="dropdown" href="#">
                                                        Sort by <i class="aweso-angle-down"></i>
                                                    </a>
                                                    <ul class="dropdown-menu pull-right black">
                                                        <li><a href="#">Date</a></li>
                                                        <li><a href="#">Sender</a></li>
                                                        <li><a href="#">Subject</a></li>
                                                        <li class="divider"></li>
                                                        <li><a href="#">Something Else</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div><!-- /message control -->

                                        <!-- tab pane inbox -->
                                        <div class="tab-pane active" id="inbox">
                                            <!-- message pane -->
                                            <ul class="message-pane">
                                                <li class="message-item">
                                                    <input class="message-checked" type="checkbox" value="1" />
                                                    <a href="#reading-pane" data-toggle="tab">
                                                        <div class="message-date pull-right">14/06/2013</div>
                                                        <div class="message-subject">Getting started with your template</div>
                                                        <div class="message-snippet">
                                                            <p>Blandit vestibulum leo tellus purus voluptas.</p>
                                                        </div>
                                                    </a>
                                                </li> <!-- /message item -->
                                                <li class="message-item">
                                                    <input class="message-checked" type="checkbox" value="2" />
                                                    <a href="#reading-pane" data-toggle="tab">
                                                        <div class="message-date pull-right">14/06/2013</div>
                                                        <div class="message-subject">Stilearning freebies</div>
                                                        <div class="message-snippet">
                                                            <p>Facilisis pharetra est dolor vel magna.</p>
                                                        </div>
                                                    </a>
                                                </li> <!-- /message item -->
                                                <li class="message-item unread">
                                                    <input class="message-checked" type="checkbox" value="3" />
                                                    <a href="#reading-pane" data-toggle="tab">
                                                        <div class="message-date pull-right">13/06/2013</div>
                                                        <div class="message-subject">Meeting Invitation</div>
                                                        <div class="message-snippet">
                                                            <p>Volutpat arcu in, porta etiam dolor sociosqu.</p>
                                                        </div>
                                                    </a>
                                                </li> <!-- /message item -->
                                                <li class="message-item">
                                                    <input class="message-checked" type="checkbox" value="4" />
                                                    <a href="#reading-pane" data-toggle="tab">
                                                        <div class="message-date pull-right">12/06/2013</div>
                                                        <div class="message-subject">Sales promotion from syrena</div>
                                                        <div class="message-snippet">
                                                            <p>Platea donec condimentum pulvinar ornare sem.</p>
                                                        </div>
                                                    </a>
                                                </li> <!-- /message item -->
                                                <li class="message-item">
                                                    <input class="message-checked" type="checkbox" value="5" />
                                                    <a href="#reading-pane" data-toggle="tab">
                                                        <div class="message-date pull-right">12/06/2013</div>
                                                        <div class="message-subject">Item sold</div>
                                                        <div class="message-snippet">
                                                            <p>Tempor libero hendrerit quis nulla.</p>
                                                        </div>
                                                    </a>
                                                </li> <!-- /message item -->
                                                <li class="message-item">
                                                    <input class="message-checked" type="checkbox" value="6" />
                                                    <a href="#reading-pane" data-toggle="tab">
                                                        <div class="message-date pull-right">12/06/2013</div>
                                                        <div class="message-subject">Request a custom template</div>
                                                        <div class="message-snippet">
                                                            <p>Lobortis tortor maiores eu sodales.</p>
                                                        </div>
                                                    </a>
                                                </li> <!-- /message item -->
                                                <li class="message-item">
                                                    <input class="message-checked" type="checkbox" value="7" />
                                                    <a href="#reading-pane" data-toggle="tab">
                                                        <div class="message-date pull-right">11/06/2013</div>
                                                        <div class="message-subject">Re : Latest project schedule</div>
                                                        <div class="message-snippet">
                                                            <p>Blandit vestibulum leo tellus purus voluptas.</p>
                                                        </div>
                                                    </a>
                                                </li> <!-- /message item -->
                                                <li class="message-item">
                                                    <input class="message-checked" type="checkbox" value="8" />
                                                    <a href="#reading-pane" data-toggle="tab">
                                                        <div class="message-date pull-right">10/06/2013</div>
                                                        <div class="message-subject">Birthday greeting</div>
                                                        <div class="message-snippet">
                                                            <p>Ligula donec malesuada vivamus.</p>
                                                        </div>
                                                    </a>
                                                </li> <!-- /message item -->
                                                <li class="message-item">
                                                    <input class="message-checked" type="checkbox" value="9" />
                                                    <a href="#reading-pane" data-toggle="tab">
                                                        <div class="message-date pull-right">09/06/2013</div>
                                                        <div class="message-subject">Request documentation</div>
                                                        <div class="message-snippet">
                                                            <p>Etiam in maecenas et interdum mauris.</p>
                                                        </div>
                                                    </a>
                                                </li> <!-- /message item -->
                                                 <!-- action load more -->
                                                <li><button id="more-message" class="btn btn-block btn-small">Load more</button></li>
                                            </ul><!-- /message pane -->
                                        </div><!-- /tab pane inbox -->

                                        <!-- tab pane draft -->
                                        <div class="tab-pane" id="draft">
                                            <!-- message pane -->
                                            <ul class="message-pane">
                                                <li class="message-item">
                                                    <input class="message-checked" type="checkbox" value="7" />
                                                    <a href="#reading-pane" data-toggle="tab">
                                                        <div class="message-date pull-right">11/06/2013</div>
                                                        <div class="message-subject">Latest project schedule</div>
                                                        <div class="message-snippet">
                                                            <p>Blandit vestibulum leo tellus purus voluptas.</p>
                                                        </div>
                                                    </a>
                                                </li> <!-- /message item -->
                                                <li class="message-item">
                                                    <input class="message-checked" type="checkbox" value="8" />
                                                    <a href="#reading-pane" data-toggle="tab">
                                                        <div class="message-date pull-right">10/06/2013</div>
                                                        <div class="message-subject">Birthday greeting</div>
                                                        <div class="message-snippet">
                                                            <p>Ligula donec malesuada vivamus.</p>
                                                        </div>
                                                    </a>
                                                </li> <!-- /message item -->
                                                <li class="message-item">
                                                    <input class="message-checked" type="checkbox" value="9" />
                                                    <a href="#reading-pane" data-toggle="tab">
                                                        <div class="message-date pull-right">09/06/2013</div>
                                                        <div class="message-subject">Request documentation</div>
                                                        <div class="message-snippet">
                                                            <p>Etiam in maecenas et interdum mauris.</p>
                                                        </div>
                                                    </a>
                                                </li> <!-- /message item -->
                                            </ul><!-- /message pane -->
                                        </div><!-- tab pane draft -->

                                        <!-- tab pane send -->
                                        <div class="tab-pane" id="send">
                                            <!-- message pane -->
                                            <ul class="message-pane">
                                                <li class="message-item">
                                                    <input class="message-checked" type="checkbox" value="7" />
                                                    <a href="#reading-pane" data-toggle="tab">
                                                        <div class="message-date pull-right">11/06/2013</div>
                                                        <div class="message-subject">Re : Latest project schedule</div>
                                                        <div class="message-snippet">
                                                            <p>Blandit vestibulum leo tellus purus voluptas.</p>
                                                        </div>
                                                    </a>
                                                </li> <!-- /message item -->
                                            </ul><!-- /message pane -->
                                        </div><!-- tab pane send -->

                                        <!-- tab pane archive -->
                                        <div class="tab-pane" id="archive">
                                            <p>Just alert to empty archive</p>
                                        </div><!-- tab pane archive -->

                                        <!-- tab pane trash -->
                                        <div class="tab-pane" id="trash">
                                            <p>Just alert to empty trash</p>
                                        </div><!-- tab pane trash -->

                                    </div> <!-- /tab content -->
                                </div> <!-- /messgaetab-pane -->
                                

                                <!-- reading pane -->
                                <div id="reading-pane" class="reading-pane">
                                    <div class="message-template">
                                        <div class="message-header clearfix">
                                            <div class="pull-right">
                                                <div class="btn-group">
                                                    <a class="btn btn-link" href="#" title="Previous message"> <i class="icomo-arrow-left-2"></i></a>
                                                    <a class="btn btn-link" href="#" title="Next message"> <i class="icomo-arrow-right-3"></i></a>
                                                </div>
                                            </div>
                                            <h3 class="message-template-subject">Getting started with your template - 14/06/2013</h3>
                                        </div>
                                        <div class="message-content" data-scrollbar="mscroll" data-theme="dark-thick" data-button="true">
                                            <div class="btn-group pull-right">
                                                <a class="btn btn-small btn-link dropdown-toggle" data-toggle="dropdown" href="#">
                                                    Actions <i class="aweso-angle-down"></i>
                                                </a>
                                                <ul class="dropdown-menu pull-right black">
                                                    <li><a href="#">Reply</a></li>
                                                    <li><a href="#">Forward</a></li>
                                                    <li><a href="#">Archive</a></li>
                                                    <li><a href="#">Trash</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Mark as read</a></li>
                                                    <li><a href="#">Mark as unread</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Print</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Something Else</a></li>
                                                </ul>
                                            </div> <!-- /inline action for message-->
                                            <div class="message-details">
                                                <div class="media">
                                                    <a class="pull-left" href="#">
                                                        <img class="media-object" alt="64x64" style="width: 64px; height: 64px;" src="img/demo/2.jpg" />
                                                    </a>
                                                    <div class="media-body">
                                                        <p>Display name (john.doe@mail.co)</p>
                                                        <p>to: admin@mail.com</p>
                                                    </div>
                                                </div>
                                            </div> <!-- /details message -->
                                            <p>Platea donec condimentum pulvinar ornare sem. Facilisis adipiscing vel. Volutpat arcu in, porta etiam dolor sociosqu, vestibulum quam. Amet faucibus in, massa sed, lectus ridiculus quis aliquam felis nulla quis, dui faucibus ligula, integer orci ullamcorper suscipit id penatibus. Hac massa et interdum massa massa mollis, molestie nulla nullam consectetuer mollis, porta odio in ut nulla, elit tempus nibh in.</p>
                                            <p class="lead">Here are some tips to get you started:</p>
                                            <ul>
                                                <li>Minim <a href="#">ante</a> nam mollis neque in</li>
                                                <li>Ante volutpat vel vestibulum nostrud <a href="#">dolor integer</a></li>
                                                <li>Lacinia dolor mauris feugiat etiam</li>
                                                <li>Bibendum luctus vestibulum amet massa massa</li>
                                                <li>Suscipit eget blandit <a href="#">ligula</a> ut enim justo</li>
                                            </ul>
                                            <p class="lead">Volutpat arcu in, porta etiam dolor sociosqu, vestibulum quam.</p>
                                            <p>Platea donec condimentum pulvinar ornare sem. Facilisis adipiscing vel. Volutpat arcu in, porta etiam dolor sociosqu, vestibulum quam. Amet faucibus in, massa sed, lectus ridiculus quis aliquam felis nulla quis, dui faucibus ligula, integer orci ullamcorper suscipit id penatibus. Hac massa et interdum massa massa mollis, molestie nulla nullam consectetuer mollis, porta odio in ut nulla, elit tempus nibh in.</p>
                                            <br />
                                            <br />
                                            <p>Regards</p>
                                        </div>
                                    </div>
                                </div><!-- reading pane -->
                            </div> <!-- /inbox -->

                        </div><!-- /content-inner-->
                    </div><!-- /main-page-->

                    
                </article> <!-- /content page -->
                
                
            </div> <!--/ end content -->
        </section> <!-- /end section content-->
        
        
        <!-- footer, I place the footer on here. -->
        <footer class="footer">
            <p>Copyright &copy; 2013. All Right Reserved.</p>
        </footer><!--/ footer -->
        
        
        
        
        <!-- javascript
        ================================================== -->
        <!-- required js -->
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui.min.js"></script>
        <script type="text/javascript" src="js/jquery.ui.touch-punch.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/m-scrollbar/jquery.mCustomScrollbar.min.js"></script>
        
        <!-- metro js, required! -->
        <script type="text/javascript" src="js/metro-base.js"></script>
        
        <!-- demo js -->
        <script type="text/javascript" src="js/holder/holder.js"></script>
        <script type="text/javascript">
            $(function(){
                "use strict";
                
                // inbox demo
                $('.message-toggle').click(function(){
                    var checker = ($(this).is(':checked')) ? true : false;
                    
                    $('.message-checked').prop('checked', checker);
                    
                    if(checker == true)
                        $('.message-item').addClass('selected')
                    else
                        $('.message-item').removeClass('selected')
                    
                })
            });
        </script>
    </body>
</html>
